<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     
input[type="checkbox"] + span::before {
	content: "\a0";		/*不换行空格*/
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	border: 1px solid #c0eafa;
	border-radius: 2px;
    width: 12px;
	height: 12px;
	background-clip: content-box;
    background: url('select2.png') no-repeat center;
    background-size: 60%;
	padding: 2px;
    transition: all 0.3s
}
input[type="checkbox"]:checked + span::before {
	width: 12px;
	height: 12px;
	background-clip: content-box;
    background: #2fb7ec url('selected.png') no-repeat center;
    background-size: 80%;
	padding: 2px;
}
input[type="checkbox"]:disabled + span::before {
	width: 12px;
	height: 12px;
	background-clip: content-box;
    background: #eaf1f5 url('selected.png') no-repeat left top;
    background-size: 100%;
	padding: 2px;
    border: 1px solid #eaf1f5
}
input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.c{
    width: 20px;
    overflow:hidden; 

text-overflow:ellipsis;

display:-webkit-box; 

-webkit-box-orient:vertical;

-webkit-line-clamp:2
}
    </style>
</head>
<body>
    <div style="background:black">
    <img src="selected.png" alt="6666">
</div>
    <div class="ul-con">
        <ul style="overflow: hidden;">
            <li><label for="1"><input value="1" type="checkbox" id="1" disabled /><span>一层</span></label></li>
            <li><label for="2"><input value="2" type="checkbox" id="2" /><span>二层</span></label></li>
            <li><label for="3"><input  value="3" type="checkbox" id="3"  /><span>三层</span></label></li>
            <li><label for="4"><input  value="4" type="checkbox" id="4" /><span>四层</span></label></li>
        </ul>
    </div>

    <div class="c">
        77777777777777777777777777777777777777777777777777
    </div>
   
</body>

</html>